<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本标签</title>
    <style>
        .em{
            color: red;
        }
    </style>
</head>
<body>
    <!-- span:
    1.行内元素 inline
    2.和不加span直接写文字效果一样。但是用span包裹文字能够更好的定位到文字，并设置样式。 -->
    <span>君不见黄河之水天上来，奔流到海不复回。</span>
    <span>君不见高堂明镜悲白发，朝如青丝暮成雪。</span>
    人生得意需尽欢，莫使金樽空对月。
    <div>
        前端开发需要用到<span class="em">javascript</span>技术
    </div>
    <!-- p 段落标签，英文paragraph缩写
        1.块级元素 block
        2.该元素内的文本如果超过浏览器的边界也会换行
        3.默认和上下有间距
        4.不要在p 标签里面包裹另外一个p标签，可能会出渲染错误。
     -->
    <p>茅屋为秋风所破</p>
    <p>安得广厦千万间，大庇天下寒士俱欢颜</p>
    <p>八月里秋深，狂风怒号，狂风卷走了我屋顶上好几层茅草。茅草乱飞，渡过浣花溪，散落在对岸江边。飞得高的茅草缠绕在高高的树梢上，飞得低的飘飘洒洒沉落到池塘和洼地里。南村的一群儿童欺负我年老没力气，竟忍心这样当面做“贼”抢东西，毫无顾忌地抱着茅草跑进竹林去了。</p>
    <p>

    下一段
    </p>
    <!-- 
        <h1~h6> 标题标签，英文head
        1.块级元素
        2.默认加粗
        3.h1-h6字体以此减小
    -->
    <h1>标题h1</h1>
    <h2>标题h2</h2>
    <h3>标题h3</h3>
    <h4>标题h4</h4>
    <h6>标题h6</h6>
    <!-- br 换行符，可以使用多个，不能改变元素的显示属性
     -->
    
     <!-- 扩展标签
    粗体：<b>(<https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/b>)
    斜体：<i>(<https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/i>)
    强调：<strong>(<https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/strong>)
    上标：<sup>(<https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/sup>)
    下标：<sub>(<https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/sub>)
    小号字：<small>(<https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/small>)
    插入字：<ins>(<https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ins>)
    删除字：<del>(<https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/del>) 
    -->
      <b>粗体：</b>
      <i>斜体：</i>
      <strong>强调：</strong>
      <sup>上标：</sup>
      <sub>下标</sub>
      <small>小号字：</small>
      <ins>插入字：</ins>
      <del>删除字：</del>
     

</body>
</html>